<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta charset="utf-8">
    <title>packages/my-map-draw/Draw.js - Documentation</title>
    
    
    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <link type="text/css" rel="stylesheet" href="styles/prettify.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
    <script src="scripts/nav.js" defer></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
  <div class="navicon"></div>
</label>

<label for="nav-trigger" class="overlay"></label>

<nav >
    
    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="ol.interaction.areaSelect.html">areaSelect</a></li><li><a href="ol.interaction.drag.html">drag</a></li><li><a href="ol.source.TileSuperMapRest.html">TileSuperMapRest</a><ul class='methods'><li data-type='method'><a href="ol.source.TileSuperMapRest.html#.createTileGrid">createTileGrid</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#.optionsFromMapJSON">optionsFromMapJSON</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#changeTilesVersion">changeTilesVersion</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#createLayerUrl">createLayerUrl</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#getAllRequestParams">getAllRequestParams</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#getFullRequestUrl">getFullRequestUrl</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#getRequestParamString">getRequestParamString</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#lastTilesVersion">lastTilesVersion</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#mergeTileVersionParam">mergeTileVersionParam</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#nextTilesVersion">nextTilesVersion</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#setTileSetsInfo">setTileSetsInfo</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#updateCurrentTileSetsIndex">updateCurrentTileSetsIndex</a></li></ul></li></ul><h3>Modules</h3><ul><li><a href="module-$ui_map_mixins_feature.html">$ui/map/mixins/feature</a><ul class='methods'><li data-type='method'><a href="module-$ui_map_mixins_feature.html#~draw">draw</a></li><li data-type='method'><a href="module-$ui_map_mixins_feature.html#~modify">modify</a></li><li data-type='method'><a href="module-$ui_map_mixins_feature.html#~setStyle">setStyle</a></li></ul></li><li><a href="module-$ui_map_mixins_image.html">$ui/map/mixins/image</a></li><li><a href="module-$ui_map_mixins_stroke.html">$ui/map/mixins/stroke</a></li><li><a href="module-$ui_map_my-map.html">$ui/map/my-map</a><ul class='methods'><li data-type='method'><a href="module-$ui_map_my-map.html#~addFeature">addFeature</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~clickTrigger">clickTrigger</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~dispose">dispose</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~getFeatureAtPixel">getFeatureAtPixel</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~getFeatureVM">getFeatureVM</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~getLayer">getLayer</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~getMetersPerUnit">getMetersPerUnit</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~mapReady">mapReady</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~moveTo">moveTo</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~removeFeature">removeFeature</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~resize">resize</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~setActive">setActive</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~setCursor">setCursor</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~zoomIn">zoomIn</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~zoomOut">zoomOut</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~zoomTo">zoomTo</a></li></ul></li><li><a href="module-$ui_map_my-map-circle.html">$ui/map/my-map-circle</a></li><li><a href="module-$ui_map_my-map-cluster.html">$ui/map/my-map-cluster</a><ul class='methods'><li data-type='method'><a href="module-$ui_map_my-map-cluster.html#~clear">clear</a></li><li data-type='method'><a href="module-$ui_map_my-map-cluster.html#~draw">draw</a></li></ul></li><li><a href="module-$ui_map_my-map-draw.html">$ui/map/my-map-draw</a><ul class='methods'><li data-type='method'><a href="module-$ui_map_my-map-draw.html#~addFeature">addFeature</a></li><li data-type='method'><a href="module-$ui_map_my-map-draw.html#~clear">clear</a></li><li data-type='method'><a href="module-$ui_map_my-map-draw.html#~draw">draw</a></li><li data-type='method'><a href="module-$ui_map_my-map-draw.html#~finish">finish</a></li><li data-type='method'><a href="module-$ui_map_my-map-draw.html#~getFeatures">getFeatures</a></li><li data-type='method'><a href="module-$ui_map_my-map-draw.html#~modify">modify</a></li><li data-type='method'><a href="module-$ui_map_my-map-draw.html#~removeFeature">removeFeature</a></li></ul></li><li><a href="module-$ui_map_my-map-flight.html">$ui/map/my-map-flight</a></li><li><a href="module-$ui_map_my-map-geo.html">$ui/map/my-map-geo</a></li><li><a href="module-$ui_map_my-map-heat.html">$ui/map/my-map-heat</a></li><li><a href="module-$ui_map_my-map-html.html">$ui/map/my-map-html</a></li><li><a href="module-$ui_map_my-map-icon.html">$ui/map/my-map-icon</a></li><li><a href="module-$ui_map_my-map-image.html">$ui/map/my-map-image</a></li><li><a href="module-$ui_map_my-map-layers.html">$ui/map/my-map-layers</a></li><li><a href="module-$ui_map_my-map-line.html">$ui/map/my-map-line</a></li><li><a href="module-$ui_map_my-map-link.html">$ui/map/my-map-link</a></li><li><a href="module-$ui_map_my-map-marker.html">$ui/map/my-map-marker</a></li><li><a href="module-$ui_map_my-map-measure.html">$ui/map/my-map-measure</a><ul class='methods'><li data-type='method'><a href="module-$ui_map_my-map-measure.html#~clear">clear</a></li></ul></li><li><a href="module-$ui_map_my-map-overview.html">$ui/map/my-map-overview</a></li><li><a href="module-$ui_map_my-map-palette.html">$ui/map/my-map-palette</a></li><li><a href="module-$ui_map_my-map-panel.html">$ui/map/my-map-panel</a></li><li><a href="module-$ui_map_my-map-placement.html">$ui/map/my-map-placement</a></li><li><a href="module-$ui_map_my-map-pointer.html">$ui/map/my-map-pointer</a></li><li><a href="module-$ui_map_my-map-polygon.html">$ui/map/my-map-polygon</a></li><li><a href="module-$ui_map_my-map-popup.html">$ui/map/my-map-popup</a></li><li><a href="module-$ui_map_my-map-rectangle.html">$ui/map/my-map-rectangle</a></li><li><a href="module-$ui_map_my-map-scale.html">$ui/map/my-map-scale</a></li><li><a href="module-$ui_map_my-map-scatter.html">$ui/map/my-map-scatter</a></li><li><a href="module-$ui_map_my-map-text.html">$ui/map/my-map-text</a></li><li><a href="module-$ui_map_my-map-track.html">$ui/map/my-map-track</a></li><li><a href="module-$ui_map_my-map-zoom.html">$ui/map/my-map-zoom</a></li><li><a href="module-$ui_map_utils_style.html">$ui/map/utils/style</a><ul class='methods'><li data-type='method'><a href="module-$ui_map_utils_style.html#~parse">parse</a></li></ul></li><li><a href="module-$ui_map_utils_util.html">$ui/map/utils/util</a><ul class='methods'><li data-type='method'><a href="module-$ui_map_utils_util.html#.coordinateEqual">coordinateEqual</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.createBezierCurvePoints">createBezierCurvePoints</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.createCurvePoints">createCurvePoints</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.createLinePathPoints">createLinePathPoints</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.factorial">factorial</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.fromLonLat">fromLonLat</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.geoJsonDecode">geoJsonDecode</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.getDistance">getDistance</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.mergeProps">mergeProps</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.parseDecimal">parseDecimal</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.svgToImg">svgToImg</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.toLonLat">toLonLat</a></li></ul></li></ul><h3>Events</h3><ul><li><a href="module-$ui_map_my-map-cluster.html#~event:change">change</a></li><li><a href="module-$ui_map_my-map-panel.html#~event:close">close</a></li><li><a href="module-$ui_map_my-map-pointer.html#~event:copy">copy</a></li><li><a href="module-$ui_map_my-map-draw.html#~event:drawend">drawend</a></li><li><a href="module-$ui_map_my-map-draw.html#~event:drawstart">drawstart</a></li><li><a href="module-$ui_map_my-map-measure.html#~event:end">end</a></li><li><a href="module-$ui_map_my-map-draw.html#~event:modifyend">modifyend</a></li><li><a href="module-$ui_map_my-map-draw.html#~event:modifystart">modifystart</a></li><li><a href="global.html#event:on-boxEnd">on-boxEnd</a></li><li><a href="global.html#event:on-boxStart">on-boxStart</a></li><li><a href="global.html#event:on-dragDown">on-dragDown</a></li><li><a href="global.html#event:on-dragMove">on-dragMove</a></li><li><a href="global.html#event:on-dragUp">on-dragUp</a></li><li><a href="module-$ui_map_my-map-geo.html#~event:ready">ready</a></li><li></li></ul><h3>Interfaces</h3><ul><li><a href="module-$ui_map_mixins_feature.methods.drawHandler.html">drawHandler</a></li><li><a href="module-$ui_map_mixins_feature.methods.modifyHandler.html">modifyHandler</a></li></ul><h3>Global</h3><ul><li><a href="global.html#createEzMapLayer">createEzMapLayer</a></li><li><a href="global.html#createFcMapLayer">createFcMapLayer</a></li><li><a href="global.html#createFounderLayer">createFounderLayer</a></li><li><a href="global.html#createLayer">createLayer</a></li><li><a href="global.html#createSuperLayer">createSuperLayer</a></li><li><a href="global.html#createTdtLayer">createTdtLayer</a></li><li><a href="global.html#createTdtLayerGroup">createTdtLayerGroup</a></li><li><a href="global.html#createWMTSLayer">createWMTSLayer</a></li><li><a href="global.html#props">props</a></li></ul>
</nav>

<div id="main">
    
    <h1 class="page-title">packages/my-map-draw/Draw.js</h1>
    

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>/**
 * Draw 绘画组件
 * @module $ui/map/my-map-draw
 */
import {Vector as VectorLayer} from 'ol/layer'
import {Vector as VectorSource} from 'ol/source'
import {Draw, Snap, Modify} from 'ol/interaction'
import GeoJSON from 'ol/format/GeoJSON'
import parseStyle from '../../utils/style'

// 默认图形样式
const defaultEffect = {
  fill: 'rgba(255, 255, 255, 0.5)',
  stroke: {
    color: '#409eff',
    width: 2
  },
  circle: {
    radius: 6,
    fill: '#409eff',
    stroke: {
      width: 1,
      color: '#fff'
    }
  }
}

export default {
  name: 'MyMapDraw',
  inject: ['myMap'],
  render() {
    return this.$slots.default
  },
  /**
   * 属性参数
   * @member props
   * @property {string} [type=LineString] 图形类型，支持 'Point', 'LineString', 'Polygon', 'Circle'
   * @property {object|function} [brush] 画笔样式配置
   * @property {object|function} [effect] 图形样式配置
   * @property {boolean} [manual] 启用手动控制，启用后，可按需要调用 draw modify finish 方法完成画图功能
   * @property {object} [options] Draw组件附加参数对象，支持：{clickTolerance,dragVertexDelay,snapTolerance,stopClick,maxPoints,minPoints,freehand,wrapX}
   */
  props: {
    type: {
      type: String,
      default: 'LineString',
      validator(val) {
        return ['Point', 'LineString', 'Polygon', 'Circle'].includes(val)
      }
    },
    // 画笔样式
    brush: {
      type: [Object, Function]
    },
    // 图形样式
    effect: {
      type: [Object, Function],
      default() {
        return defaultEffect
      }
    },
    // 手动控制
    manual: Boolean,
    /*
      {
        clickTolerance: Number,
        dragVertexDelay: Number,
        snapTolerance: Number,
        stopClick: Boolean,
        maxPoints: Number,
        minPoints: Number,
        freehand: Boolean,
        wrapX: Boolean
      }
     */
    options: Object


  },
  watch: {
    type() {
      if (!this.manual) {
        this.finish()
        this.draw()
        this.modify()
      }
    }
  },
  methods: {
    getStyle(config) {
      if (!config) return null
      return typeof config === 'function'
        ? config()
        : parseStyle(config)
    },
    init(map) {
      if (this.layer) return
      const source = new VectorSource()
      const style = this.getStyle(this.effect)
      this.layer = new VectorLayer({
        source,
        style
      })
      map.addLayer(this.layer)
      if (!this.manual) {
        this.draw()
        this.modify()
      }
      this.$emit('ready', this)
    },
    /**
     * 进入绘画模式
     * @method draw
     * @param {function} [callback] 绘画结束时回调函数
     */
    draw(callback) {
      if (!this.layer) return
      const source = this.layer.getSource()
      const style = this.getStyle(this.brush)
      const type = this.type
      const map = this.myMap.map
      const draw = new Draw({
        ...this.options,
        type,
        source,
        style
      })
      this.drawStartHandler = e => {
        /**
         * 开始绘画时触发
         * @event drawstart
         * @param {Object} e 事件对象，{feature}
         */
        this.$emit('drawstart', e)
      }
      this.drawEndHandler = e => {
        callback &amp;&amp; callback(e)
        /**
         * 结束绘画时触发
         * @event drawend
         * @param {Object} e 事件对象，{feature}
         */
        this.$emit('drawend', e)
      }
      draw.on('drawstart', this.drawStartHandler)
      draw.on('drawend', this.drawEndHandler)
      this.drawInstance = draw
      this.snapInstance = new Snap({source})
      map.addInteraction(draw)
      map.addInteraction(this.snapInstance)
    },
    /**
     * 进入绘画编辑模式
     * @method modify
     * @param {function} [callback] 编辑结束时回调函数
     */
    modify(callback) {
      if (!this.layer) return
      const map = this.myMap.map
      const source = this.layer.getSource()
      const style = this.getStyle(this.brush)
      const modify = new Modify({
        ...this.options,
        source,
        style
      });
      this.modifyStartHandler = e => {
        /**
         * 开始编辑时触发
         * @event modifystart
         * @param {Object} e 事件对象，{feature}
         */
        this.$emit('modifystart', e)
      }
      this.modifyEndHandler = e => {
        callback &amp;&amp; callback(e)
        /**
         * 结束编辑时触发
         * @event modifyend
         * @param {Object} e 事件对象，{feature}
         */
        this.$emit('modifyend', e)
      }
      modify.on('modifystart', this.modifyStartHandler)
      modify.on('modifyend', this.modifyEndHandler)
      this.modifyInstance = modify
      map.addInteraction(this.modifyInstance)
    },
    /**
     * 完成绘画和编辑
     * @method finish
     */
    finish() {
      const map = this.myMap.map
      if (!map) return
      const draw = this.drawInstance
      const modify = this.modifyInstance
      if (draw) {
        draw.un('drawstart', this.drawStartHandler)
        draw.un('drawend', this.drawEndHandler)
        draw.dispose()
        map.removeInteraction(draw)
        map.removeInteraction(this.snapInstance)
        this.drawInstance = null
      }
      if (modify) {
        modify.un('modifystart', this.modifyStartHandler)
        modify.un('modifyend', this.modifyEndHandler)
        modify.dispose()
        map.removeInteraction(modify)
        this.modifyInstance = null
      }

    },
    dispose() {
      this.finish()
      if (this.myMap.map) {
        this.layer &amp;&amp; this.myMap.map.removeLayer(this.layer)
      }
    },
    /**
     * 获取当前画布图层上的图形
     * @method getFeatures
     * @returns {Array}
     */
    getFeatures() {
      if (!this.layer) return []
      const source = this.layer.getSource()
      return source.getFeatures()
    },
    /**
     * 清空画布
     * @method clear
     */
    clear() {
      if (!this.layer) return
      const source = this.layer.getSource()
      source.clear()
    },
    /**
     * 删除指定图形
     * @method removeFeature
     * @param feature
     */
    removeFeature(feature) {
      const source = this.layer.getSource()
      source.removeFeature(feature)
    },
    /**
     * 添加图形, 图形加入到矢量图层
     * @method addFeature
     * @param {Feature[]|feature} feature
     */
    addFeature(feature) {
      const features = [].concat(feature)
      const source = this.layer.getSource()
      source.addFeatures(features)
    },
    /**
     * 图层上全部图形转换成JSON描述
     * @returns {string}
     */
    toJSON() {
      const features = this.getFeatures()
      return (new GeoJSON()).writeFeatures(features)
    },
    /**
     * 根据GeoJSON在图层上创建 feature
     * @param {object} json
     */
    fromJSON(json) {
      const features = (new GeoJSON()).readFeatures(json)
      this.addFeature(features)
    },
    /**
     * Feature转换成JSON
     * @param {Object} feature
     * @returns {string}
     */
    writeFeature(feature) {
      return (new GeoJSON()).writeFeature(feature)
    },
    /**
     * JSON转换成Feature
     * @param json
     * @returns {string}
     */
    readFeature(json) {
      return (new GeoJSON()).writeFeature(json)
    }
  },
  created() {
    this.myMap.mapReady(this.init)
  },
  beforeDestroy() {
    this.dispose()
  }
}
</code></pre>
        </article>
    </section>





    
</div>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.5</a> on Thu Sep 17 2020 14:48:38 GMT+0800 (GMT+08:00) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
</footer>

<script>prettyPrint();</script>
<script src="scripts/polyfill.js"></script>
<script src="scripts/linenumber.js"></script>




<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?c4e5f73318b5cb0c389e3d9a05f831cc";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>

</body>
</html>
